<template>
    <div class="students-info">
        <el-form v-if="JSON.stringify(formLabelAlign) != '{}'" label-position="right" label-width="150px" :model="formLabelAlign">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="真实姓名：" class="red">
                            <el-input v-model="formLabelAlign.user.name" :disabled="isDisabled"></el-input>
                            <span class="span-bz">填写您的真实姓名</span>
                        </el-form-item>
                        <el-form-item label="证件类型：" class="red">
                            <el-select v-model="formLabelAlign.user.certificateType" placeholder="请选择" :disabled="isDisabled">
                                <el-option label="身份证" :value="0"></el-option>
                                <el-option label="护照" :value="1"></el-option>
                                <el-option label="军官证" :value="2"></el-option>
                            </el-select>
                            <span class="span-bz">填写选择证件类型</span>
                        </el-form-item>
                        <el-form-item label="毕业时间：">
                            <el-date-picker v-model="formLabelAlign.graduationTime" type="date" placeholder="选择日期" :disabled="isDisabled" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            <span class="span-bz">请选择毕业时间</span>
                        </el-form-item>
                        <el-form-item label="从事行业：">
                            <el-select v-model="formLabelAlign.trade" placeholder="请选择" :disabled="isDisabled">
                                <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span class="span-bz">填选择从事行业</span>
                        </el-form-item>
                        <el-form-item label="职务：" class="red">
                            <el-input v-model="formLabelAlign.duty" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写职务</span>
                        </el-form-item>
                        <el-form-item label="电子邮箱：" class="red">
                            <el-input v-model="formLabelAlign.user.email" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写电子邮箱</span>
                        </el-form-item>
                        <el-form-item label="邮政编码：">
                            <el-input v-model="formLabelAlign.user.postcode" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写邮政编码</span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple" prop="resource">
                        <el-form-item label="性别：">
                            <el-radio-group v-model="formLabelAlign.user.sex" :disabled="isDisabled">
                                <el-radio :label="0">男</el-radio>
                                <el-radio :label="1">女</el-radio>
                            </el-radio-group>
                            <span class="span-bz">请选择您的性别</span>
                        </el-form-item>
                        <el-form-item label="证件号码：" class="red">
                            <el-input v-model="formLabelAlign.user.certificate" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写证件号码</span>
                        </el-form-item>
                        <el-form-item label="专业：">
                            <el-select v-model="formLabelAlign.major" placeholder="请选择" :disabled="isDisabled">
                                <el-option v-for="item in majorArr" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span class="span-bz">请选择专业</span>
                        </el-form-item>
                        <el-form-item label="现在单位：" class="red">
                            <el-input v-model="formLabelAlign.corporation" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写现在单位</span>
                        </el-form-item>
                        <el-form-item label="固定电话：">
                            <el-input v-model="formLabelAlign.user.telephone" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写固定电话</span>
                        </el-form-item>
                        <el-form-item label="备用邮箱：">
                            <el-input v-model="formLabelAlign.email_bak" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写备用邮箱</span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="出生日期：">
                            <el-date-picker v-model="formLabelAlign.user.birthday" type="date" placeholder="选择日期" :disabled="isDisabled" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            <span class="span-bz">请选择您的出生日期</span>
                        </el-form-item>
                        <el-form-item label="毕业院校：">
                            <el-input v-model="formLabelAlign.schoolTag" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写毕业院校</span>
                        </el-form-item>
                        <el-form-item label="最高学历：">
                            <el-select v-model="formLabelAlign.education" placeholder="请选择" :disabled="isDisabled">
                                <el-option v-for="item in educationArr" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span class="span-bz">请选择学历</span>
                        </el-form-item>
                        <el-form-item label="企业类型：">
                            <el-select v-model="formLabelAlign.corporationType" placeholder="请选择" :disabled="isDisabled">
                                <el-option v-for="item in corporationTypeArr" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span class="span-bz">请选择企业类型</span>
                        </el-form-item>
                        <el-form-item label="手机号码：" class="red">
                            <el-input v-model="formLabelAlign.user.phone" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写手机号码</span>
                        </el-form-item>
                        <el-form-item label="通讯地址：">
                            <el-input v-model="formLabelAlign.user.address" :disabled="isDisabled"></el-input>
                            <span class="span-bz">请填写通讯地址</span>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="个人照片：" class="red">
                        <!-- <div class="avatar-sc">
                            <img v-if="formLabelAlign.user.header" :src="$imgPath(formLabelAlign.user.header)" alt="">
                        </div>
                        <div class="sc-button">
                            <input type="file" :disabled="isDisabled" @change="changeImage($event)">
                            上传
                        </div> -->
                        <el-upload
                            class="avatar-sc"
                            :action="active"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="formLabelAlign.user.header" :src="$imgPath(formLabelAlign.user.header)" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8" class="">
                    <!-- <div class="s-add">收件地址：</div> -->
                    <el-form-item label="收件人" class="t-a-l">
                        <el-input v-model="formLabelAlign.postName" :disabled="isDisabled"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" class="t-a-l">
                        <el-input v-model="formLabelAlign.postPhone" :disabled="isDisabled"></el-input>
                    </el-form-item>
                    <el-form-item label="收件地址" class="t-a-l">
                        <el-input v-model="formLabelAlign.postAddress" :disabled="isDisabled"></el-input>
                    </el-form-item>
                    <el-form-item label="邮政编码" class="t-a-l">
                        <el-input v-model="formLabelAlign.postCode" :disabled="isDisabled"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button class="go-pay" v-if="isDisabled == true" @click="isDisabled = false">修改</el-button>
                    <el-button class="go-pay" v-if="isDisabled == false" @click="isDisabled = true">取消</el-button>
                    <el-button class="go-pay" v-if="isDisabled == false" @click="examdata">提交信息</el-button>
                </el-col>
            </el-row>
        </el-form>
        
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            options:['农、林、牧、渔','采矿','制造','电力、燃气及水的生产和供应',
                    '交通运输、仓储和邮政','信息传输、计算机服务和软件','批发和零售',
                    '住宿和餐饮','金融','房地产','租赁和商务服务','科学研究、技术服务和地质勘查',
                    '水利、环境和公共设施管理','居民服务和其他服务','教育','卫生、社会保障和社会福利',
                    '文化、体育和娱乐','公共管理与社会组织','国际组织','其他'],
            majorArr:['法学','工学','管理学','教育学','经济学','理学','历史学','农学','体育','文学','医学','艺术','语言类','哲学','其他'],
            educationArr:['专科及以下','本科','硕士','博士及以上'],
            corporationTypeArr:['国企','外企','民企','国家机关','事业单位','社会团体','个体','其他'],
            formLabelAlign:{},
            imageUrl: '',
            isDisabled:true,
            active:''
        }
    },
    mounted(){
        this.info()
    },
    methods:{
        handleAvatarSuccess(res, file) {
            this.$message({
                message: '上传成功',
                type: 'success'
            })
        },
        beforeAvatarUpload(file) {
            this.changeImage(file)
        },
        // 获取个人信息
        info(){
            apiHttp.apiIndex.examDetail('').then(resp=>{
                if(resp.code == 0){
                    this.formLabelAlign = resp.data
                }
            })
        },
        // 上传头像
        changeImage(e){
            let fd = new FormData()
            fd.append('module','header')
            fd.append('file', e)
            // if (e.target.files[0].length !== 0) {
            //     fd.append('file', e.target.files[0])
            // }
            apiHttp.apiIndex.uploadImg(fd).then(resp=>{
                if(resp.code == 0){
                    this.formLabelAlign.user.header = resp.data
                }
            })
        },
        // 更新考生数据
        examdata(){
            if(this.formLabelAlign.user.name == ''){
                this.validation('真实姓名不能为空')
                return
            }else if(this.formLabelAlign.user.certificateType === ''){
                this.validation('请选择证件类型')
                return
            }else if(this.formLabelAlign.user.certificate == ''){
                this.validation('证件号码不能为空')
                return
            }else if(this.formLabelAlign.corporation == ''){
                this.validation('现在单位不能为空')
                return
            }else if(this.formLabelAlign.duty == ''){
                this.validation('职位不能为空')
                return
            }else if(this.formLabelAlign.user.phone == ''){
                this.validation('手机号码不能为空')
                return
            }else if(this.formLabelAlign.user.phone){
                let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
                if(!reg.test(this.formLabelAlign.user.phone)){
                    this.validation('手机号码格式不对')
                    return
                }
            }
            if(this.formLabelAlign.user.email == null || this.formLabelAlign.user.email == ''){
                this.validation('邮箱不能为空')
                return
            }else if(this.formLabelAlign.user.email){
                let reg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
                if(!reg.test(this.formLabelAlign.user.email)){
                    this.validation('邮箱格式不对')
                    return
                }
            }
            if(this.formLabelAlign.user.header == '' || this.formLabelAlign.user.header == null){
                this.validation('请上传个人照片')
                return
            }
            apiHttp.apiIndex.examUpdate(this.formLabelAlign).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.info()
                    this.isDisabled = !this.isDisabled
                }
            })
        },
        // 验证必填项
        validation(message){
            this.$message({
                message: message,
                type: 'warning'
            });
        },
    }
}
</script>
<style lang="less">
.students-info{
    .grid-content{
        .el-form-item{
            margin-bottom: 15px;
        }
        .el-radio-group{
            display: block;
            height: 40px;
            line-height: 50px;
            text-align: left;
            overflow: hidden;
        }
        .el-input{
            width:200px;
        }
        .el-select{
            width: 200px;
            .el-input{
                width: 100%;
            }
        }
        .span-bz{
            display: block;
            width: 100%;
            text-align: left;
            height: 20px;
            line-height: 20px;
            color: #999;
        }
        .el-form-item__content{
            text-align: left;
        }
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar-sc {
        width: 178px;
        height: 178px;
        display: block;
        border: 1px dashed #d9d9d9;
        float: left;
        border-radius: 5px;
        .el-upload{
            width: 178px;
            height: 178px;
            border-radius: 5px;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        img{
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }
    }
    .sc-button{
        width: 90px;
        height: 30px;
        border: solid 1px #dcdfe6;
        float: left;
        position: relative;
        line-height: 30px;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20px;
        margin-top: 150px;
        input{
            position: absolute;
            left: 0;
            top: 0;
            width: 90px;
            height: 30px;
            opacity: 0;
            z-index: 99;
            font-size: 0;
            display: block;
        }
    }
    .s-add{
        width: 100%;
        text-align: left;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #606266;
        padding-left: 70px;
    }
    .el-input{
        width: 200px;
    }
    .go-pay{
        margin-top: 30px;
        background-color: #5d2805;
        color: #fff;
        border-color: #5d2805;
        cursor: pointer;
        font-size: 16px;
        width: 50%;
    }
}
</style>


